import { Image, Text, View } from '@tarojs/components'
import './index.less'

interface OrderItem {
  id: string
  name: string
  description: string
  price: string
  quantity: string
  image: string
}

interface OrderDetailProps {
  orderItems: OrderItem[]
  totalAmount: number
  onProductClick?: (packageId: string) => void
}

const OrderDetail: React.FC<OrderDetailProps> = ({ orderItems, totalAmount, onProductClick }) => {
  return (
    <View>
      <View className='order-items-list'>
        {orderItems.map((item) => (
          <View key={item.id} className='order-item' onClick={() => onProductClick?.(item.id)}>
            <Image className='order-item-image' src={item.image} mode='aspectFill' />
            <View className='order-item-content'>
              <Text className='order-item-name'>{item.name}</Text>
              <Text className='order-item-description'>{item.description}</Text>
              <View className='order-item-footer'>
                <Text className='order-item-price'>{item.price}</Text>
                <Text className='order-item-quantity'>{item.quantity}</Text>
              </View>
            </View>
            <View className='order-item-arrow'>
              <Text className='arrow-icon'>›</Text>
            </View>
          </View>
        ))}
      </View>
      <View className='order-total'>
        <Text className='total-label'>总计: </Text>
        <Text className='total-amount'>¥{totalAmount.toLocaleString()}</Text>
      </View>
    </View>
  )
}

export default OrderDetail
